<template>
  <a-table :columns="columns" :data-source="clients" :pagination="false">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'id'">
        <a>
          {{ record.id }} <a-tag color="green" v-if="socketId === record.id">自己</a-tag>
        </a>
      </template>
      <template v-if="column.key === 'action'">
        <span v-if="record.room==='admin'">-</span>
        <span v-else>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>

import { ref } from "vue";
import { io } from "socket.io-client";
const columns = [
  {
    title: "Id",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "角色",
    dataIndex: "room",
    key: "room",
  },
  {
    title: "操作",
    key: "action",
  },
];

const socketId = ref('');
const clients = ref([]);
const socket = io("http://localhost:3002",{
    path: "/app"
});
socket.on("connect", () => {
  console.log("连接成功，id：" + socket.id);
  socketId.value = socket.id as string;
  socket.on("clientsChange", (e) => {
    clients.value = e;
  });
});
</script>
